<template>
  <div class="list">
    <ul class="list-ul">
      <li class="item"
          v-for="item of this.letters"
          :key="item"
          :ref="item"
          @click="handleClick"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "cityAlphabet",
  props: {
    cities: Object
  },
  data() {
    return {
      //判断移动开始结束
      isMoveing: false,
      //获取A起始点的高度
      //性能优化第一方面 不变的数据，在开始获取一次，保存住，不需要一直获取一个常量
      startY: "",
      //定时器控件
      timer: null
    };
  },
  //updated钩子  这个组件在创建时，传进来的是空对象{}，在数据发生变化并渲染完成后，会触发updated钩子
  //起始点可以在这里一次获取，作为常量
  updated() {
    this.startY = this.$refs.A[0].offsetTop;
  },
  computed: {
    letters() {
      const letterArray = [];
      for (let item in this.cities) {
        letterArray.push(item);
      }

      return letterArray;
    }
  },
  methods: {
    handleClick(e) {
      // console.log(e.target.innerText);
      //父子组件通信
      //this.$emit("wordChange", e.target.innerText);

      //事件总线方式
      this.$bus.$emit("wordChangeBus", e.target.innerText);
    },
    //touchstart,touchmove,touchend是h5的触摸事件
    handleTouchStart() {
      this.isMoveing = true;
    },
    handleTouchMove(e) {
      if (this.isMoveing) {
        //性能优化第二步， 函数截流， touchmove在触摸时的触发是很大量的，
        //所以定义20毫秒执行一次，存在timer则清除，
        if (this.timer) {
          clearTimeout(this.timer);
        }

        this.timer = setTimeout(() => {
          //offsetTop是获取当前dom对象的相对高度
          //const a_y = this.$refs.A[0].offsetTop;
          //e.touches[0]可以获取当前的触摸对象，clientY是获取Y轴高度，相对于最顶端
          //89是搜索栏高度，16是A-Z每个对象的高度
          const targetY = e.touches[0].clientY - 89;
          const index = Math.floor((targetY - this.startY) / 16);
          if (index >= 0 && index < this.letters.length) {
            this.$bus.$emit("wordChangeBus", this.letters[index]);
          }
        }, 20);
      }
    },
    handleTouchEnd() {
      this.isMoveing = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import ('~styles/varibles.styl');

.list {
  position: absolute;
  right: 0;
  top: 1.78rem;
  bottom: 0;
  width: 0.34rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;

  .list-ul {
    .item {
      text-align: center;
      line-height: 0.32rem;
      color: $bgColor;
      font-size: 0.2rem;
    }
  }
}
</style>
